<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件捕获</title>
	<style type="text/css">
		div{
			border: 1px solid #cccccc;
			padding: 4em;
			box-sizing: border-box;
		}
		div#outer{
			width: 400px;
			height: 400px;
			margin: 0 auto;
		}
		div#center,div#inner{
			height: 100%;
		}
	</style>
</head>
<body>
	<div id="outer">
		<div id="center">
			<div id="inner"></div>
		</div>
	</div>
	<script type="text/javascript">
		var outer = document.querySelector("#outer")
		var center = document.querySelector("#center")
		var inner = document.querySelector("#inner")
		function handler(event){
			console.log("目标dom",event.target);
			console.log("事件类型",event.type);
			console.log("当前目标",event.currentTarget);
			console.log(event instanceof MouseEvent);
			console.log(event instanceof Event);  
			event.stopPropagation();
		}
		outer.addEventListener("click",handler)
		center.addEventListener("click",handler)
		inner.addEventListener("click",handler)
	</script>
</body>
</html>